<template>
    <div class="count">
        <div v-loading="loadings" element-loading-text="加载中...">
            <div class="top f f-a-c f-j-b">
                <div class="spotEvent">热点事件</div>
                <div @click="Settings" class="subscribe f f-a-c">
                    <img src="/src/status/colorJia.png" class="colorJia" alt="">
                    订阅设置
                </div>
            </div>
            <!-- 下面tabs切换 -->
            <div class="tabs f f-a-c">
                <div class="chaes" @click="tabsCountries(index)" v-for="(item, index) in valueList" :key="index"
                    :class="{ act: ind == index }">{{ item.zh_name }}</div>
                <!-- <div class="chaes" @click="tabsCountries(2)" :class="{ act: ind == 2 }">美国</div>
            <div class="chaes" @click="tabsCountries(3)" :class="{ act: ind == 3 }">俄罗斯</div> -->
            </div>
            <!-- 下面的列表 -->
            <div class="listHot">
                <div v-for="(item, index) in listObj" @click="itemList(item)" :key="index" class="item f f-a-c">
                    <img :src="item.image" class="imgTowImg" alt="">
                    <div class="rigTit">
                        <div class="topName">{{ item.zh_title || item.title }}</div>
                        <div class="time">{{ item.news_time }}</div>
                    </div>
                </div>
            </div>
            <!-- 下面的分页 -->
            <div class="paging">
                <div class="article">总共{{ total }}条</div>
                <el-pagination page-count="500" v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                    :page-sizes="list" :small="small" :disabled="disabled" :background="background"
                    layout="sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
    <!-- 组件 -->
    <SubscriptionSettings :options="options" @upData="upData" :valueList="valueList" ref="Setting"
        @detilStuaJian="detilStuaJian" @detilStua="detilStua" />
    <!-- 详情弹出层 -->
    <CountDetile ref="Detil" @zuoFerter="zuoFerter" @youFerter="youFerter" :item="item" />
</template>

<script setup>
import SubscriptionSettings from './SubscriptionSettings/index.vue'
import CountDetile from './CountDetile/index.vue'
import router from '../../router/index'
import { GetSubscribeCountry, addressUri, GetHotSpotList, GetHotSpotInfo } from '../../api/index'
import { ref, onMounted } from 'vue'
//! 这个是仓库数据
// import app from '../../store/counter'
// const counterStore = app()
// const { count } = counterStore
// console.log(counterStore.init(), '000000000000000000000000000000000000');
// console.log(count, '989898989898898998');
let ind = ref(0)
let Setting = ref(null)//设置ref
let Detil = ref(null)//设置ref
let currentPage4 = ref(1)
let list = ref([5, 10, 15, 20])
let listObj = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
let pageSize4 = ref(5)
let small = ref(false)
let background = ref(false)
let disabled = ref(false)
let item = ref(null)
let loadings = ref(false)
let valueList = ref([])
let total = ref(0)
let options = ref([])
// let num = ref(5)//页数
// /这个是生命周期
onMounted(() => {
    allChina()
    initList()

})
const initContent = async () => {
    let n = await GetHotSpotList({
        wiki_uri_id: valueList.value[ind.value].id,
        page: currentPage4.value,
        pageSize: pageSize4.value,
        max_id: currentPage4.value == 1 ? '' : listObj.value[0].id
    })
    listObj.value = n.content.list
    total.value = n.content.total

}
// 获取我的订阅国家
const initList = async () => {
    let n = await GetSubscribeCountry()
    valueList.value = n.content.list
    initContent()
}
const allChina = async () => {
    let n = await addressUri()
    options.value = n.content.list
}
const handleSizeChange = (e) => {
    console.log(e, pageSize4.value, '111111111111111');
    initContent()
    // alert('111')
}
const handleCurrentChange = (e) => {
    console.log(e, currentPage4.value, '111111111111111');
    initContent()
    // alert(e)
}
// 子组件传过来的
const detilStua = () => {
    valueList.value.push({
        address_uri: "http://en.wikipedia.org/wiki/Afghanistan",
        en_name: "Afghanistan",
        id: 1,
        zh_name: "阿富汗",
    })
}
// 子组件传过来的
const detilStuaJian = (index) => {
    valueList.value.splice(index, 1)
}
// /子组件传过来的更新
const upData = () => {

}
// 点击切换tabs
const tabsCountries = (num) => {
    console.log('1111111122222222222222222222222');
    ind.value = num
    currentPage4.value = 1
    pageSize4.value = 5
    initContent()
    // router.push('/Login')
}
// 点击订阅设置
const Settings = () => {
    // console.log(Setting.value.visible
    Setting.value.visible = true
}
const zuoFerter = async (id) => {
    Detil.value.loading = true
    let n = await GetHotSpotInfo({
        spot_id: id,
    })
    item.value = n.content
    Detil.value.loading = false
}
const youFerter = async (id) => {
    Detil.value.loading = true
    let n = await GetHotSpotInfo({
        spot_id: id,
    })
    item.value = n.content
    Detil.value.loading = false
}
//点击列表弹出弹出层
const itemList = async (items) => {
    loadings.value = true
    let n = await GetHotSpotInfo({
        spot_id: items.id
    })
    item.value = n.content
    loadings.value = false
    Detil.value.visibles = true
}
</script>
<style scoped>
@import './index.scss';
</style>
